import type { CompanyInfoDto, EleSignInfoDto } from '@/api/company/types'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import toNative from '@/utils/toNative'
import { Component, Emit, Prop, Ref, Watch } from 'vue-facing-decorator'
import Drawer from '@/components/drawer/Index'


import RenderDescription, { type DescItemDto } from '@/components/render-descriotion/Index'
import { VxeColumn, VxeTable } from 'vxe-table'
import { queryConfigDetail } from '@/api/emailConfig'
import type { CommunicationConfigDto } from '@/api/emailConfig/types'

@Component
export class DrawerPreview extends TableRender {
    @Prop() show!: boolean
    @Prop() id!: number

    showDrawer = false
    detail = {} as CommunicationConfigDto

    get descData() {
        return [
            {
                label: '规则名称',
                value: ''
            },
            {
                label: '保险产品',
                value: ''
            }
        ] as DescItemDto[]
    }

    get apiData() {
        return [
            {
                label: '数据推送地',
                value: '',
                span: 2
            },
            {
                label: '密钥',
                value: ''
            },
            {
                label: '授权码',
                value: ''
            }
        ] as DescItemDto[]
    }

    @Emit('update:show')
    updateShow(val: boolean) {
        return val
    }

    @Emit('refresh')
    handleRefresh() {}

    @Watch('show', { immediate: true })
    handleWatchShow() {
        this.showDrawer = this.show
        if (this.showDrawer) {
            this.initData()
        }
    }

    @Watch('showDrawer', { immediate: true })
    handleWatchShowDialog() {
        this.updateShow(this.showDrawer)
    }

    async initData() {
        const res = await queryConfigDetail({
            id: this.id
        })
        this.detail = res
    }

    render() {
        return (
            <>
                <Drawer
                    v-model:show={this.showDrawer}
                    size={900}
                    title="推送规则预览"
                    resetStyle={true}
                    showClose
                    v-slots={{
                        default: () => {
                            return (
                                <div>
                                    <RenderDescription row={2} renderData={this.descData} />
                                    <div class="text-lg mt-24px mb-16px">邮件规则</div>
                                    <VxeTable border="none">
                                        <VxeColumn field="1" title="邮件模板"></VxeColumn>
                                        <VxeColumn field="2" title="邮件标题"></VxeColumn>
                                        <VxeColumn field="3" title="邮件正文"></VxeColumn>
                                        <VxeColumn field="4" title="邮件地址"></VxeColumn>
                                    </VxeTable>
                                    <div class="flex">
                                        <div class="text-black-300 flex-shrink-0">客户清单：</div>
                                        <div class="flex-1">
                                            <div>需要发送新增客户清单，每天20:00:00发送;</div>
                                            <div class="bg-fill px-16px py-12px rounded-m mt-8px">
                                                <div class="flex">
                                                    <div class="text-black-300 flex-shrink-0">邮箱地址：</div>
                                                    <div class="flex-1">123@121.com</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="text-lg mt-24px mb-16px">API推送规则</div>
                                        <RenderDescription row={2} renderData={this.apiData} />
                                    </div>
                                    <div>
                                        <div class="text-lg mt-24px mb-16px">映射关系</div>
                                        <VxeTable border="none">
                                            <VxeColumn field="1" title="原始字段"></VxeColumn>
                                            <VxeColumn field="2" title="原始字段名称"></VxeColumn>
                                            <VxeColumn field="3" title="转换后字段名"></VxeColumn>
                                        </VxeTable>
                                    </div>
                                </div>
                            )
                        }
                    }}
                ></Drawer>
            </>
        )
    }
}

export default toNative<{id: number}, { refresh: () => void }>(DrawerPreview)
